<template>
  <div>
    <!-- 表格数据 -->
    <el-table :data="tableData">
      <!-- 展开的内容 -->
      <el-table-column type="expand">
        <template slot-scope="scope">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="商品名称：">
              <span>{{ scope.row.name }}</span>
            </el-form-item>
            <el-form-item label="所属分类：">
              <span>{{ scope.row.category }}</span>
            </el-form-item>
            <el-form-item label="商品价格：">
              <span>{{ scope.row.price }}</span>
            </el-form-item>
            <el-form-item label="商品销量：">
              <span>{{ scope.row.sellCount }}</span>
            </el-form-item>
            <el-form-item label="商品描述：">
              <span>{{ scope.row.goodsDesc }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="商品分类" prop="category"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="图片">
        <template slot-scope="scope">
          <img
            style="width: 90px; height: 90px"
            :src="GET_UPLOAD_GOODS_IMG + scope.row.imgUrl"
          />
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="goodsDesc"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 修改商品数据的对话框 -->
    <el-dialog title="修改商品数据" :visible.sync="dialogVisible" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-select v-model="form.category" placeholder="请选择商品分类">
            <el-option
              v-for="item in categories"
              :key="item.cateName"
              :label="item.cateName"
              :value="item.cateName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商品价格">
          <el-input-number v-model="form.price" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="添加图片">
          <el-upload
            :action="UPLOAD_IMG"
            list-type="picture-card"
            :on-success="uploadfinsh"
            :show-file-list="false"
          >
            <i class="el-icon-plus" v-show="form.imgUrl == ''"> </i>
            <img
              v-show="form.imgUrl !== ''"
              style="width: 140px; height: 140px"
              :src="GET_UPLOAD_GOODS_IMG + form.imgUrl"
            />
          </el-upload>
        </el-form-item>
        <el-form-item label="商品描述">
          <el-input type="textarea" v-model="form.goodsDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="editComfirm">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>


<script>
import {
  goodsList,
  GET_UPLOAD_GOODS_IMG,
  UPLOAD_IMG,
  categories,
  goodsEdit,
  goodsDel,
} from "../../../../api/apis";
export default {
  data() {
    return {
      tableData: [], //表格数据
      GET_UPLOAD_GOODS_IMG: "", //上传的商品图片地址
      currentPage: 1, //当前页码
      total: 1, //总条数
      pageSize: 10, //每页显示的条数
      dialogVisible: false, //修改商品数据对话框关闭
      // 点击编辑按钮的商品数据的对话框
      form: {},
      categories: [], //商品分类的数组
    };
  },
  methods: {
    // ---------------------------------①分页操作的函数---------------------------------------
    //1.每页显示的条数发生变化
    handleSizeChange(newpageSize) {
      this.pageSize = newpageSize;
      // 刷新表格数据
      this.refreshTable();
    },
    //2.当前页码发生变化
    handleCurrentChange(newcurrentPage) {
      this.currentPage = newcurrentPage;
      this.refreshTable();
    },

    //----------------------------②封装函数，刷新表格数据------------------------------------
    refreshTable() {
      goodsList(this.currentPage, this.pageSize).then((res) => {
        this.tableData = res.data.data;
        this.total = res.data.total;
      });
    },
    //----------------------------③编辑、删除按钮------------------------------------
    // 点击编辑按钮
    handleEdit(row) {
      // 打开对话框
      this.dialogVisible = true;
      this.form = { ...row }; //深拷贝 让这一行的数据==form
      this.selectvalue = this.form.category;
    },
    // 删除按钮
    handleDelete(scope) {
      this.$confirm("此操作将永久删除该商品, 是否继续?", "美团系统提示", {
        cancelButtonText: "取消",
        confirmButtonText: "确定",
        type: "warning",
      }).then(() => {
        goodsDel(scope.row.id)
          .then((res) => {
            if (res.data.code == 0) {
              this.$message({
                message: "美团系统提醒，商品数据已删除",
                type: "success",
              });
              this.refreshTable();
            }
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    // 确定修改商品按钮
    editComfirm() {
      goodsEdit(this.form).then((res) => {
        if (res.data.code == 0) {
          this.dialogVisible = false;
          this.$message({
            message: "美团系统提醒，商品数据已修改",
            type: "success",
          });
          this.refreshTable();
        }
      });
    },
    uploadfinsh(res) {
      if (res.code == 0) {
        //获取上传成功到服务器的图片
        this.form.imgUrl = res.imgUrl;
      }
    },
  },
  created() {
    this.GET_UPLOAD_GOODS_IMG = GET_UPLOAD_GOODS_IMG; //让data里的数据==我从import引过来的数据
    this.UPLOAD_IMG = UPLOAD_IMG;
    this.refreshTable();
    // 获取商品所有分类
    categories().then((res) => {
      this.categories = res.data.categories;
      // 设置默认选项值
    });
  },
};
</script>

<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
}
.demo-table-expand .el-form-item {
  margin-left: 40px;
  margin-bottom: 0;
  width: 60%;
}
</style>